<script setup lang="ts">
import { ref, onMounted } from "vue";
import packageJSON from "../package.json";
import { useThemeAndFontStore } from "./store/theme";
const themeAndFontStore = useThemeAndFontStore();
const theme = ref(localStorage.getItem("theme") || "light");
// const font = ref(localStorage.getItem("font") || "kai"); // 添加字体状态
const toggleTheme = () => {
  theme.value = theme.value === "light" ? "dark" : "light";
  localStorage.setItem("theme", theme.value);

  document.documentElement.setAttribute("data-theme", theme.value);
  console.log(theme.value);
};
// const toggleFont = (newFont: string) => {
//   font.value = newFont;
//   localStorage.setItem("font", font.value);
//   document.documentElement.setAttribute("data-font", font.value);
// };
console.log(window);
onMounted(() => {
  document.documentElement.setAttribute("data-theme", theme.value);
  document.documentElement.setAttribute("data-font", themeAndFontStore.font); // 初始化字体状态
});

const minewindow = () => {
  window.ipcRenderer.send("mine_window");
};
const closewindow = () => {
  window.ipcRenderer.send("close_window");
};
</script>

<template>
  <div class="main_app" :data-theme="theme" :data-font="themeAndFontStore.font">
    <div>
      <div class="title">{{ packageJSON.productName }}</div>
      <div class="them" @click="toggleTheme">
        <div v-if="theme == 'dark'">
          <svg
            t="1736349550237"
            class="icon"
            viewBox="0 0 1064 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="18357"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="266"
            height="256"
          >
            <path
              d="M471.36768 34.57024c58.90048-7.45472 84.45952 57.63072 58.08128 96.17408a276.48 276.48 0 0 0 384.28672 384.28672c38.54336-26.37824 103.6288-0.8192 96.17408 58.08128C979.84512 810.06592 777.6256 993.28 532.48 993.28c-265.8304 0-481.28-215.4496-481.28-481.28C51.2 266.89536 234.41408 64.63488 471.36768 34.57024z m-69.38624 121.6512A379.0848 379.0848 0 0 0 153.6 512 378.88 378.88 0 0 0 532.48 890.88a379.0848 379.0848 0 0 0 355.81952-248.38144A378.88 378.88 0 0 1 401.98144 156.18048z"
              fill="#e6e6e6"
              p-id="18358"
            ></path>
            <path
              d="M781.02528 93.51168a19.2512 19.2512 0 0 1 35.38944 0l28.672 65.9456c7.7824 17.85856 22.07744 32.11264 39.97696 39.89504l65.9456 28.71296a19.2512 19.2512 0 0 1 0 35.38944l-65.9456 28.672c-17.89952 7.7824-32.1536 22.07744-39.936 39.936l-28.71296 65.9456a19.2512 19.2512 0 0 1-35.38944 0l-28.672-65.9456a77.16864 77.16864 0 0 0-39.97696-39.89504l-65.9456-28.71296a19.2512 19.2512 0 0 1 0-35.38944l65.9456-28.672c17.89952-7.7824 32.1536-22.07744 39.936-39.936l28.71296-65.9456z"
              fill="#e6e6e6"
              p-id="18359"
            ></path>
          </svg>
        </div>
        <div v-if="theme == 'light'">
          <svg
            t="1736349751775"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="22827"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="256"
            height="256"
          >
            <path
              d="M438.857 73.143c0-40.396 32.466-73.143 73.143-73.143 40.396 0 73.143 32.466 73.143 73.143v73.143h-146.286v-73.143zM438.857 877.714h146.286v73.143c0 40.396-32.466 73.143-73.143 73.143-40.396 0-73.143-32.466-73.143-73.143v-73.143zM73.143 585.143c-40.396 0-73.143-32.466-73.143-73.143 0-40.396 32.466-73.143 73.143-73.143h73.143v146.286h-73.143zM877.714 585.143v-146.286h73.143c40.396 0 73.143 32.466 73.143 73.143 0 40.396-32.466 73.143-73.143 73.143h-73.143zM149.961 253.401c-28.564-28.564-28.763-74.676 0-103.44 28.564-28.564 74.676-28.763 103.44 0l51.719 51.719-103.44 103.44-51.722-51.719zM718.879 822.319l103.44-103.44 51.719 51.722c28.564 28.564 28.763 74.676 0 103.44-28.564 28.564-74.676 28.763-103.44 0l-51.719-51.719zM253.401 874.039c-28.564 28.564-74.676 28.763-103.44 0-28.564-28.564-28.763-74.676 0-103.44l51.719-51.719 103.44 103.44-51.719 51.722zM822.319 305.121l-103.44-103.44 51.722-51.719c28.564-28.564 74.676-28.763 103.44 0 28.564 28.564 28.763 74.676 0 103.44l-51.719 51.719zM512 804.571c161.583 0 292.571-130.989 292.571-292.571 0-161.583-130.989-292.571-292.571-292.571-161.583 0-292.571 130.989-292.571 292.571 0 161.583 130.989 292.571 292.571 292.571z"
              fill="#000000"
              p-id="22828"
            ></path>
          </svg>
        </div>
      </div>
      <div @click="minewindow" class="mine">
        <div v-if="theme == 'dark'">
          <svg
            t="1736345681299"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7723"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="256"
            height="256"
          >
            <path
              d="M1007.493645 92.03483l-191.681183 189.804743 149.205406 0.62548c21.664352-0.454895 41.850297 14.499763 45.205144 40.258166l-0.056862 27.691705a41.679711 41.679711 0 0 1-40.258166 40.315027c-94.106306-0.568618-188.269474-1.478407-282.318918-1.478407-16.831098 0.398033-34.287675 2.615644-47.252169-10.576298-12.907632-12.793909-8.699858-32.24065-8.699858-48.559991l1.194098-282.148333c0.454895-21.721214 18.48009-34.74257 40.201304-35.254326h27.634843c21.721214-0.511756 39.007206 18.48009 38.49545 40.201304l-1.25096 154.550417L931.469397 15.839996a53.84814 53.84814 0 0 1 76.024248 76.194834z m-367.21361 552.981164c13.419389-13.874283 31.046552-10.405712 48.332544-10.405712l277.144493-1.705855c21.664352 0.568618 39.74641 18.536952 40.258166 40.37189v27.691704c-3.354847 25.644679-23.48393 39.007206-45.205144 38.552312l-146.81721 0.568618 193.557623 191.567459a54.018726 54.018726 0 0 1 0 76.251696 53.734416 53.734416 0 0 1-76.137972 0l-193.557623-191.738045 1.194098 150.115195c0.568618 21.778076-16.774236 40.769922-38.438588 40.258166l-27.691704-0.056861c-21.721214-0.511756-39.632686-13.47625-40.201304-35.197465l-1.137237-277.769973c0-16.205618-4.435222-35.936668 8.699858-48.503129zM384.231276 378.618384c-12.907632 13.191941-30.477934 11.031192-47.252169 10.63316-93.878859 0-187.871441 0.909789-281.7503 1.478407a41.736573 41.736573 0 0 1-40.315028-40.315027v-27.691705c3.354847-25.644679 23.48393-40.713061 45.262006-40.201304l146.987795-0.568618L15.368673 92.091692a54.132449 54.132449 0 0 1 0-76.251696 53.734416 53.734416 0 0 1 76.137973 0l193.614484 190.487085L283.87017 52.857039c-0.454895-21.664352 16.831098-40.656199 38.552312-40.144443h29.226973c21.834937 0.454895 39.74641 13.533112 40.258166 35.254326l1.080375 282.148333c0 16.262479 4.150913 35.822944-8.75672 48.503129zM208.812573 739.975227l-148.750512-0.454894c-21.721214 0.454895-41.850297-12.907632-45.148282-38.552312v-27.691704a41.679711 41.679711 0 0 1 40.258166-40.37189c93.935721 0.568618 187.928303 1.535269 281.807162 1.535269 16.774236-0.454895 34.344537-2.672505 47.252169 10.576298 12.964494 12.680185 8.699858 32.297512 8.699858 48.503129l-1.080375 279.816999c-0.511756 21.778076-18.48009 34.74257-40.315027 35.254326h-29.226974c-21.664352 0.568618-38.950344-18.423228-38.49545-40.201304l1.25096-151.081846-193.557622 190.487084a53.734416 53.734416 0 0 1-76.137973 0 53.961864 53.961864 0 0 1 0-76.251695l193.4439-191.56746z"
              fill="#e6e6e6"
              p-id="7724"
            ></path>
          </svg>
        </div>
        <div v-if="theme == 'light'">
          <svg
            t="1736345681299"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7723"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="256"
            height="256"
          >
            <path
              d="M1007.493645 92.03483l-191.681183 189.804743 149.205406 0.62548c21.664352-0.454895 41.850297 14.499763 45.205144 40.258166l-0.056862 27.691705a41.679711 41.679711 0 0 1-40.258166 40.315027c-94.106306-0.568618-188.269474-1.478407-282.318918-1.478407-16.831098 0.398033-34.287675 2.615644-47.252169-10.576298-12.907632-12.793909-8.699858-32.24065-8.699858-48.559991l1.194098-282.148333c0.454895-21.721214 18.48009-34.74257 40.201304-35.254326h27.634843c21.721214-0.511756 39.007206 18.48009 38.49545 40.201304l-1.25096 154.550417L931.469397 15.839996a53.84814 53.84814 0 0 1 76.024248 76.194834z m-367.21361 552.981164c13.419389-13.874283 31.046552-10.405712 48.332544-10.405712l277.144493-1.705855c21.664352 0.568618 39.74641 18.536952 40.258166 40.37189v27.691704c-3.354847 25.644679-23.48393 39.007206-45.205144 38.552312l-146.81721 0.568618 193.557623 191.567459a54.018726 54.018726 0 0 1 0 76.251696 53.734416 53.734416 0 0 1-76.137972 0l-193.557623-191.738045 1.194098 150.115195c0.568618 21.778076-16.774236 40.769922-38.438588 40.258166l-27.691704-0.056861c-21.721214-0.511756-39.632686-13.47625-40.201304-35.197465l-1.137237-277.769973c0-16.205618-4.435222-35.936668 8.699858-48.503129zM384.231276 378.618384c-12.907632 13.191941-30.477934 11.031192-47.252169 10.63316-93.878859 0-187.871441 0.909789-281.7503 1.478407a41.736573 41.736573 0 0 1-40.315028-40.315027v-27.691705c3.354847-25.644679 23.48393-40.713061 45.262006-40.201304l146.987795-0.568618L15.368673 92.091692a54.132449 54.132449 0 0 1 0-76.251696 53.734416 53.734416 0 0 1 76.137973 0l193.614484 190.487085L283.87017 52.857039c-0.454895-21.664352 16.831098-40.656199 38.552312-40.144443h29.226973c21.834937 0.454895 39.74641 13.533112 40.258166 35.254326l1.080375 282.148333c0 16.262479 4.150913 35.822944-8.75672 48.503129zM208.812573 739.975227l-148.750512-0.454894c-21.721214 0.454895-41.850297-12.907632-45.148282-38.552312v-27.691704a41.679711 41.679711 0 0 1 40.258166-40.37189c93.935721 0.568618 187.928303 1.535269 281.807162 1.535269 16.774236-0.454895 34.344537-2.672505 47.252169 10.576298 12.964494 12.680185 8.699858 32.297512 8.699858 48.503129l-1.080375 279.816999c-0.511756 21.778076-18.48009 34.74257-40.315027 35.254326h-29.226974c-21.664352 0.568618-38.950344-18.423228-38.49545-40.201304l1.25096-151.081846-193.557622 190.487084a53.734416 53.734416 0 0 1-76.137973 0 53.961864 53.961864 0 0 1 0-76.251695l193.4439-191.56746z"
              fill="#2c2c2c"
              p-id="7724"
            ></path>
          </svg>
        </div>
      </div>
      <div @click="closewindow" class="close">
        <div v-if="theme == 'dark'">
          <svg
            t="1736345774178"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="16234"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="256"
            height="256"
          >
            <path
              d="M512 1024c-62.769351 0-123.73958-12.293997-181.111567-36.582138-55.372962-23.38858-105.148658-56.972182-147.927769-99.651342-42.679161-42.679161-76.262762-92.454856-99.651342-147.927769C59.021181 682.466764 46.727184 621.496535 46.727184 558.727184c0-64.868326 13.093607-127.637677 38.980966-186.608882 24.987799-56.972182 60.570425-107.647438 105.748365-150.626452 15.992191-15.192582 41.279844-14.592875 56.572377 1.399316 15.192582 15.992191 14.592875 41.279844-1.399317 56.572377-77.362225 73.364178-119.941435 172.615715-119.941434 279.16369 0 212.496242 172.815617 385.311859 385.311859 385.311859s385.311859-172.815617 385.311859-385.311859c0-98.65183-37.281796-192.506003-104.848804-264.270962-4.597755-4.897609-9.295461-9.695266-14.19307-14.293021-1.599219-1.499268-3.098487-2.998536-4.697706-4.397852-16.192094-14.992679-17.191606-40.280332-2.198926-56.472426 14.992679-16.192094 40.280332-17.191606 56.472425-2.198926l5.697219 5.397364c5.797169 5.597267 11.594339 11.394436 17.091654 17.191606 81.660127 86.657687 126.638165 200.002343 126.638165 319.044217 0 62.769351-12.293997 123.73958-36.582138 181.111566-23.38858 55.372962-56.972182 105.148658-99.651342 147.92777-42.679161 42.679161-92.454856 76.262762-147.927769 99.651342-57.371986 24.288141-118.342216 36.682089-181.111567 36.682089z"
              p-id="16235"
              fill="#e6e6e6"
            ></path>
            <path
              d="M499.106296 595.509224c-22.089214 0-39.980478-17.891264-39.980479-39.980478V63.56896c0-22.089214 17.891264-39.980478 39.980479-39.980478s39.980478 17.891264 39.980478 39.980478v491.959786c0 22.089214-17.991215 39.980478-39.980478 39.980478z"
              p-id="16236"
              fill="#e6e6e6"
            ></path>
          </svg>
        </div>
        <div v-if="theme == 'light'">
          <svg
            t="1736345774178"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="16234"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="256"
            height="256"
          >
            <path
              d="M512 1024c-62.769351 0-123.73958-12.293997-181.111567-36.582138-55.372962-23.38858-105.148658-56.972182-147.927769-99.651342-42.679161-42.679161-76.262762-92.454856-99.651342-147.927769C59.021181 682.466764 46.727184 621.496535 46.727184 558.727184c0-64.868326 13.093607-127.637677 38.980966-186.608882 24.987799-56.972182 60.570425-107.647438 105.748365-150.626452 15.992191-15.192582 41.279844-14.592875 56.572377 1.399316 15.192582 15.992191 14.592875 41.279844-1.399317 56.572377-77.362225 73.364178-119.941435 172.615715-119.941434 279.16369 0 212.496242 172.815617 385.311859 385.311859 385.311859s385.311859-172.815617 385.311859-385.311859c0-98.65183-37.281796-192.506003-104.848804-264.270962-4.597755-4.897609-9.295461-9.695266-14.19307-14.293021-1.599219-1.499268-3.098487-2.998536-4.697706-4.397852-16.192094-14.992679-17.191606-40.280332-2.198926-56.472426 14.992679-16.192094 40.280332-17.191606 56.472425-2.198926l5.697219 5.397364c5.797169 5.597267 11.594339 11.394436 17.091654 17.191606 81.660127 86.657687 126.638165 200.002343 126.638165 319.044217 0 62.769351-12.293997 123.73958-36.582138 181.111566-23.38858 55.372962-56.972182 105.148658-99.651342 147.92777-42.679161 42.679161-92.454856 76.262762-147.927769 99.651342-57.371986 24.288141-118.342216 36.682089-181.111567 36.682089z"
              p-id="16235"
              fill="#2c2c2c"
            ></path>
            <path
              d="M499.106296 595.509224c-22.089214 0-39.980478-17.891264-39.980479-39.980478V63.56896c0-22.089214 17.891264-39.980478 39.980479-39.980478s39.980478 17.891264 39.980478 39.980478v491.959786c0 22.089214-17.991215 39.980478-39.980478 39.980478z"
              p-id="16236"
              fill="#2c2c2c"
            ></path>
          </svg>
        </div>
      </div>
    </div>
    <div><router-view></router-view></div>
  </div>
</template>

<style lang="scss">
.main_app {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 10px;
  background-color: var(--background-color);
  color: var(--text-color);

  > div:nth-child(1) {
    width: 100%;
    height: 40px;
    -webkit-app-region: drag; // 拖拽区域
    pointer-events: none; // 禁用鼠标事件
    position: relative;

    .mine,
    .close,
    .them,
    .title {
      -webkit-app-region: no-drag; // 非拖拽区域
      pointer-events: auto; // 启用鼠标事件
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      outline: none; // 移除聚焦轮廓
      > div {
        width: 40px;
        height: 40px;
        box-sizing: border-box;
        padding: 8px;
        svg {
          width: 100%;
          height: 100%;
        }
      }

      &:focus {
        outline: none; // 移除聚焦轮廓
      }

      position: absolute;
    }
    .title {
      width: 200px;
      text-align: left;
    }
    .them {
      top: 0;
      right: 85px;
    }
    .mine {
      top: 0;
      right: 45px;

      &:hover {
        background-color: rgba($color: #000000, $alpha: 0.1); // 设置 hover 效果
      }
    }

    .close {
      top: 0;
      right: 0px;

      &:hover {
        background-color: rgba($color: #000000, $alpha: 0.1); // 设置 hover 效果
      }
    }

    button {
      position: absolute;
      top: 0;
      left: 0;
      width: 40px;
      height: 40px;
      background-color: var(--button-background-color);
      color: var(--button-text-color);
      border: none;
      cursor: pointer;
      outline: none;

      &:hover {
        background-color: rgba($color: #000000, $alpha: 0.1); // 设置 hover 效果
      }

      &:focus {
        outline: none; // 移除聚焦轮廓
      }
    }
  }
  > div:nth-child(2) {
    width: 100%;
    height: calc(100% - 40px);
  }
}
</style>
